﻿@page "/components/chipset"

<DocsPage>
    <DocsPageHeader Title="Chip Set" SubTitle="The ChipSet is used for creating groups of selections using chips.">
        <Description><br />See also: <MudLink Href="/components/chips">Chip</MudLink></Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Single selection">
                <Description>
                    Chipset will maintain a selection of chips for you. By default, you get a single selection. Setting <CodeInline>Mandatory="true"</CodeInline> will not allow to unselect the selected chip.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="ChipSetBasicExample" Block="true">
                <ChipSetBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Multiselection">
                <Description>
                    When <CodeInline>MultiSelection="true"</CodeInline> ChipSet will maintain a selection of multiple chips. Setting <CodeInline>Filter="true"</CodeInline> the selected chips will also display a check mark.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="ChipSetMultiselectionExample" Block="true">
                <ChipSetMultiselectionExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Adding and removing chips">
                <Description>
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="ChipSetAddRemoveExample" Block="true">
                <ChipSetAddRemoveExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Default chips">
                <Description>
                    Chips which have<CodeInline>Default="true"</CodeInline> will be initially selected.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="ChipSetDefaultChipsExample" Block="true">
                <ChipSetDefaultChipsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Variants">
                <Description>
                    The chip's look different when selected depending on its initial <CodeInline>Variant</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="ChipSetVariantsExample" Block="true">
                <ChipSetVariantsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Selected Color">
                <Description>
                    The chip's selected color can be changed with the <CodeInline>SelectedColor</CodeInline> property, by default it has the same color as the chip.
                </Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="ChipSetSelectedColorExample" Block="true">
                <ChipSetSelectedColorExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>